<template>
    <div class="flex">
        <div class="select">
            <el-select
                v-model="value1"
                :options="options0"
                placeholder="请选择校区"
                style="width: 240px"
                 :filterable="true"
                :peops="selectProps"
                @change="handelChange1"
            />
        </div>
        <div class="select" v-if="value1 !== 0">
            <el-select
                v-model="value2"
                :options="options1"
                placeholder="请选择楼宇"
                style="width: 240px"
                 :filterable="true"
                :peops="selectProps"
                @change="handelChange2"
            />
        </div>
        <div class="select" v-if="value1 !== 0">
            <el-select
                v-bind="attrs"
                :options="options2"
                placeholder="请选择寝室"
                 :filterable="true"
                style="width: 240px"
                :peops="selectProps"
                @change="handelChange3"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, useAttrs, watch, type PropType, nextTick, onMounted } from 'vue';
// import { getStudentBuildList, getStudentRoomList } from '@/api/staffManagement';
const props = defineProps({
    options: {
        type: Array,
        default: () => ([])
    },
    options1: {
        type: Array,
        default: () => ([])
    },
    options2: {
        type: Array,
        default: () => ([])
    },
    hostelSelectVal: {
        type: Object,
        default: () => ({})
    }
})

const attrs = useAttrs()
const emit = defineEmits(['change', 'clear', 'oneChange', 'twoChange'])

const selectProps = reactive({
    value: 'id',
    label: 'name',
})

const value1 = ref()
const value2 = ref('')
const options0 = computed(() => {
    console.log('=== 111 ', props.options)
    const arr = props.options.map((item: any) => {
        return {
            value: item.id,
            label: item.name
        }
    })
    return [...arr, { value: 0, label: '校外住宿'}]
})
const handelChange1 = async(val: number | string) => {
    value2.value = ''
    emit('oneChange', val)
    emit('clear')
}
const handelChange2 = async(val: number | string) => {
    emit('clear')
    emit('twoChange', value1.value, val)
}
const handelChange3 = (val: number | string) => {
    emit('change', {
            campusId: value1.value,
            buildId: value2.value,
            roomId: val,
        }
    )
}

const selectedHostelData = ref();
watch(
    () => props.hostelSelectVal,
    (newVal) => {
        if (newVal) {
            selectedHostelData.value = newVal;
            nextTick(() => {
                value1.value = newVal.campusId
                value2.value = newVal.buildId
            })
        }
    },
    { immediate: true } // 初始化时立即监听
);

defineExpose({
    value1,
    value2
})
</script>

<style lang="scss" scoped>
.select {
    margin-right: 6px;
}
</style>




